<template>
  <div id="bigBox">
    <div id="videoTop">
      <input type="text" v-model="search" placeholder="搜索企业" @keyup.enter="searchCompany">
      <i @click="searchCompany()" style="cursor:pointer;" class="el-icon-search"></i>
    </div>
    <div id="bigVideo" v-if="playerShow" style="width: 100%" >
      <el-button id="close"  @click="playerShow=false;">关闭</el-button>
      <video id="video" style="width: 100%"  width="90%" height="440" controls>

        <source :src="movie" type="video/mp4">
      </video>
    </div>
    <div  v-else>

      <div  class="company" v-for="(value,key) in map">
        <h3 style="margin:0;margin-left: 10px">{{getCompanyName(key)}}</h3>
        <div class="videoContainer">
          <div id="videoBox" v-for="(item,index) in value">
            <div class="img" style="position: relative">
              <img @click="openPlayer(item.id)" :src="getImg(item.coverAddress,index)" alt="">

            </div>

            <div id="content">
              <div id="title">
                <p style="line-height:20px;margin-top:8px">{{item.title}}</p>
              </div>
              <p style="color:rgb(156,163,171);line-height:20px;font-size:15px;margin-top:8px">
                <span style="margin-left: 20px"><i class="el-icon-video-play"></i>{{item.accessNum}}</span>
                &nbsp;&nbsp;&nbsp;<span style="float: left"><i class="el-icon-date"></i>{{getTime(item.createTime)}}</span></p>
            </div>
          </div>
        </div>

      </div>
    </div>



  </div>
</template>

<script>
import {getCompanyVideo,openVideo} from "../../../network/data";
import {baseUrl} from "../../../network/baseUrl"

export default {
  name: "index",
  data(){
    return{
      playerShow:false,
      search:'',
      movie:'',
      videoList:[

      ],
      map:[],
      imgMap:[],                 //封面map
      companyMap:[],          //企业信息,根据map的键取企业信息

    }
  },
  created() {
    this.getData()
  },
  methods:{
    searchCompany(){
      getCompanyVideo(this.search)
          .then(res=>{
            console.log(res)
            this.companyMap=res.data.extend.companyMap
            this.imgMap=res.data.extend.imgMap
            let map=res.data.extend.map
            this.map=map
            for (let key in map){             //遍历map拿到每个企业键的值
              for (let item of map[key]){       //遍历数组值拿到视频
                item.cid=key
                this.videoList.push(item)       //将取到的视频对象添加上cid并村存入视频列表
              }
            }
          })
    },
    getData(){
      getCompanyVideo()
          .then(res=>{
            console.log(res)
            this.companyMap=res.data.extend.companyMap
            this.imgMap=res.data.extend.imgMap
            let map=res.data.extend.map
            this.map=map
            for (let key in map){             //遍历map拿到每个企业键的值
              for (let item of map[key]){       //遍历数组值拿到视频
                item.cid=key
                this.videoList.push(item)       //将取到的视频对象添加上cid并村存入视频列表
              }
            }
          })
    },
    getCompanyName(id){
      return this.companyMap[id].companyName
    },
    getTime(time){
      let dt=new Date(time)
      return (
          dt.getFullYear() +
          "-" +
          (dt.getMonth() + 1) +
          "-" +
          dt.getDate()
      );
    },
    openPlayer(id){
      openVideo(id)
      .then(res=>{
        this.movie=baseUrl()+'/data/openData?str='+res.data.extend.address
        this.playerShow=true
      })

    },
    getImg(url,index){
      if(url==0||url==2||url==1){
        if (url==0)
          return require('../../../assets/img/tab1.jpg')
        else if(url==1)
          return require('../../../assets/img/tab2.jpg')
        else
          return require('../../../assets/img/tab3.jpg')
      }else{
        return 'data:image/png;base64,'+this.imgMap[index];
      }
    },
  }
}
</script>

<style scoped>
#videoTop{
  margin: 10px;
  width: 96%;
  background-color: #ded1d1;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#videoTop input{
  width: 90%;
  outline: none;
  border: none;
  height: 35px;
  background-color: rgba(0,0,0,0);
}
#bigBox{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 200px;
}
#videoBox{
  width: 198px;
  height: 210px;
  border: 1px rgb(229,233,239) solid;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;

}
.img{
  width: 100%;
  height: 60%;
  overflow: hidden;
}
.img img{
  width: 100%;
  height: 100%;
  transition: all .1s;
}
.img img:hover{
  transform: scale(1.2,1.2);
}
.img:hover #i{
  display: block;
}
#title{
  height: 40px;
  line-height: 20px;
}
#content{
  box-sizing: border-box;
  padding: 0px 10px;
  height: 80px;
}
#video{
  outline: none;
  height: 550px;
}
#bigVideo{
  background-color: #000;
  height: 100%;
}
#close{
  background-color: #000;
  outline: none;
  border: none;
  color: white;
  font-weight: 600;
}
.company{
  width: 100%;

}
.videoContainer{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media screen and (max-width: 400px){
  #videoBox{
    width: 100%;
  }
}
</style>
